<template>
  <van-swipe class="my-swipe" :autoplay="2500" indicator-color="white">
    <van-swipe-item v-for="i in bannerList" :key="i.title">
      <a :href="i.link">
        <!-- 监听轮播图片的加载 -->
        <img :src="i.image" alt="" @load="swiperItemLoad" />
      </a>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'

export default {
  props: {
    bannerList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      // 节流阀
      isLoad: false
    }
  },
  methods: {
    swiperItemLoad () {
      if (!this.isLoad) {
        // console.log('图片加载完成')
        this.$emit('swiperImageLoad')
        // 关闭节流阀(只需要1张图片加载完成就行)
        this.isLoad = true
      }
    }
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  }
}
</script> RecommendView

<style lang="less" scoped>
.my-swipe {
  img {
    width: 100%;
  }
}
</style>
